<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../DataTables-1.9.4/media/css/demo_page.css";
			@import "../DataTables-1.9.4/media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts-more.js"></script>
		<script src="../Highcharts-3.0.1/js/modules/exporting.js"></script>
		<script src="../TrackTables-0.0.1/tracktables_0.6.js"></script>


<input type="file" id="fileinput" multiple />
<script type="text/javascript">
	var RNAQCdata
	var processedCount=0; // global variable
	var totalFiles = 0;



NameIndex = [0];
chartColnames = ["Name",'PF_ALIGNED_BASES', 'PCT_RIBOSOMAL_BASES',
			   'PCT_CODING_BASES', 'PCT_UTR_BASES', 'PCT_INTRONIC_BASES',
			   "PCT_INTERGENIC_BASES",
			   "PCT_MRNA_BASES","PCT_USABLE_BASES","MEDIAN_CV_COVERAGE"
			   ];


  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files;
    totalFiles = files.length;
    processedCount = 0
    if (files) {
    	var k = 0
        for (var i=0, f; f=files[i]; i++) {
        	RNAQCdata = new Array(files.length);
	          var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                	//var RNAQCdata[i] = new Array(9)
                    var text = e.target.result;
                      			//#var text = reader.result;
					  			//console.log(text)
					  			var n = text.split(/\r?\n/);
					  			var nSplit = n[7].split(/\t/);
					  			//console.log(i);
					  			Temp = new Array(9);
					  			Temp[0] = f.name
					  			Temp[1] = nSplit[1];
					  			Temp[2] = nSplit[10];
					  			Temp[3] = nSplit[11];
					  			Temp[4] = nSplit[12];
					  			Temp[5] = nSplit[13];
					  			Temp[6] = nSplit[14];
					  			Temp[7] = nSplit[15];
					  			Temp[8] = nSplit[17];
					  			//console.log(k)
					  			console.log(Temp)
								RNAQCdata[k] = Temp
								k = k+1
								//alert(RNAQCdata)
								onLoadEndHandler();
                    //alert(Temp)
                };
            })(f);
            r.readAsText(f);
        }
    } else {
	      alert("Failed to load files");
    }

  }
  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
function onLoadEndHandler(){
  processedCount++;
  if(processedCount == totalFiles){
    console.log(RNAQCdata)
    			dataTablew = make2dArrayForDataTable(chartColnames,RNAQCdata,[0,1,2,3,4,5,6,7],0)
				//temp = makeDataTable(dataTablew,"dynamic","example",functionAtRedraw,"")
				  $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
				    $('#example').dataTable( {
				        "aaData": dataTablew.aaData,
				        "aoColumns": dataTablew.aoColumns,
				        "aoColumnDefs":  [
							{
								"bSearchable": false,
								"bVisible": false,
								"aTargets": [3,4,5,6,7]},
							]
				        ,
				        "fnDrawCallback": functionAtRedraw
    				} );

				console.log(dataTablew.aaData)
						var oTable = $(".display").dataTable();
						var aHash = '#';
			console.log(oTable)
			for(j=0;j<oTable.length;j++)
			{
				console.log(oTable[j].id)
							tempID = aHash.concat(oTable[j].id,"_filter input")
							$(tempID).keyup( function () {
							oTable.fnFilterAll(this.value);
							} );
						}
				Bubble = make2dArrayForHighChartsBar(chartColnames,RNAQCdata,[1],0)
				console.log(Bubble)
				makeHighChartBar(Bubble,"#container2")



  }
}

$(document).ready(function() {
    $('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
    $('#example').dataTable( {
        "aaData": [
            /* Reduced data set */
            ["NA"]

        ],
				        "aoColumns": "N"    } );






} );

</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				TrackTables Example
			</div>

			<h1>Preamble</h1>
			<p>Short demo to work with Highcharts, DataTables and dynamically link to IGV</p>

			<h1>Live example</h1>
			<div id="dynamic"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>
			<div id="container3" style="height: 300px"></div>
			<div id="container4" style="height: 300px"></div>
			<div id="container5" style="height: 300px"></div>
			<button onclick="myFunction()">Try it</button>
			  </body>
